<template>
    <div class="cartinfo-cont">
        <div class="cart-info">
            <div>
                <el-row :gutter="20">
                    <el-col :span="2" :offset="0">订单编号:</el-col>
                    <el-col :span="12" :offset="0">{{ cartInfo.order_sn }}</el-col>
                </el-row>
            </div>
            <div>
                <el-row :gutter="20">
                    <el-col :span="2" :offset="0">订单时间:</el-col>
                    <el-col :span="12" :offset="0">{{ cartInfo.createtime_text }}</el-col>
                </el-row>
            </div>
        </div>
        <div class="cart-list">
            <h2>商品信息</h2>
            <el-table :data="tableData" stripe style="width: 100%" :header-cell-style="{
                'height': '.4167rem',
                'background': '#3F7233',
                'color': '#FFFFFF',
                'font-size': '.0833rem',
                'text-align': 'center'
            }" :cell-style="{ 'text-align': 'center' }" empty-text="请添加商品">
                <el-table-column label="图片" width="180">
                    <template #default="scope">
                        <el-image style="width: .5208rem; height: .5208rem; border-radius: .0313rem;" :src="scope.row.goods_image" />
                    </template>
                </el-table-column>
                <el-table-column label="商品名称">
                    <template #default="scope">
                        <div class="goods-name">
                            {{ scope.row.goods_name }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="产品编号">
                    <template #default="scope">
                        <div class="goods-sn">
                            {{ scope.row.goods_sn }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="数量">
                    <template #default="scope">
                        <div class="goods-num">
                            {{ scope.row.goods_num }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="售价">
                    <template #default="scope">
                        <div class="goods-price">
                            ￥{{ scope.row.goods_price }}
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="cart-text">
                <div>
                    <p>
                        商品数量总计:
                    </p>
                    <p>
                        {{ tableData.length }}件
                    </p>
                </div>
                <div>
                    <p>合计商品金额:</p>
                    <p>￥{{ CartTotal }}</p>
                </div>
                <div>
                    <p>应付金额</p>
                    <i>￥{{ CartTotal }}</i>
                </div>
            </div>
        </div>

    </div>
</template>

<script setup>
import { computed, ref } from 'vue';
import { CartInfo } from '../../../api/goods'
import { useUser } from '../../../store/user';

const user = useUser()
const cartInfo = ref({})

// 表格数据
const tableData = ref([])
if (user.userinfo) {
    let { token } = user.userinfo
    let res = await CartInfo(token)
    let { lists } = res.data.data
    tableData.value = lists[0].order_goods
    cartInfo.value = lists[0]
}

const CartTotal = computed(() => {
    let total = 0
    tableData.value.forEach(obj => {
        total += eval(obj.total_price)
    })
    return total
})

</script>

<style lang="scss" scoped>
.cartinfo-cont {
    >.cart-info {
        height: .4167rem;
        background: #F8F8F8;
        border-radius: .0208rem;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        padding-left: .0938rem;

        >div {
            font-size: .0729rem;
            font-weight: 400;
            color: #333333;
        }
    }

    >.cart-list {
        background: #FFFFFF;
        padding: .1563rem 0;

        >h2 {
            font-size: .0938rem;
            font-weight: bold;
            color: #333333;
            margin-bottom: .1042rem;
        }

        >.cart-text {
            padding-top: .1042rem;
            padding-bottom: .5208rem;
            display: flex;
            flex-direction: column;
            align-items: end;

            >div {
                display: flex;
                width: 1.0417rem;
                margin-bottom: .1042rem;

                >p {
                    font-size: .0833rem;
                    font-weight: 300;
                    color: #333333;
                    margin-right: .0521rem
                }

                >i {
                    font-size: .0938rem;
                    font-weight: bold;
                    color: #E71A1A;
                }
            }
        }
    }
}
</style>